<template>
  <div class=" md:w-[30vw] md:h-[80vh]
   px-4
  rounded-2xl bg-gradient-to-b from-primary to-primary/70  w-[90vw] h-[40vh]">
    <div class="w-full h-1/6 flex flex-col justify-center items-center relative">
      <div class="divider ">播放列表</div>
    </div>

    <div class="w-full h-5/6  flex flex-col justify-start items-center overflow-y-scroll ">
      <div v-for="(item,index) in props.playerList" class="w-full flex-row flex justify-center items-center">
        <div class="w-4/6 text-start truncate">{{ item.name + ' - ' + item['singer'] }}</div>
        <div class="w-2/6 flex-row flex justify-center items-center">
          <div class="w-1/2  flex justify-center items-center"></div>

          <div @click="removeItem(index)"
               class="w-1/2  flex justify-center items-center">
            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
                 stroke="currentColor" class="w-6 h-6">
              <path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12"/>
            </svg>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">


import {usePlayerStore} from "../hook/SongPlayerHook.ts";

let props = defineProps<{
  playerList
}>()
let emits = defineEmits([
  'updatePlayerList'
]);

const removeItem = (index) => {
  usePlayerStore().removeIndexSong(index)
}




</script>

<style scoped>

</style>